<template>
  <div class="customers-comprehen">
    <div class="search-content">
      <el-select v-model="searchObj.level" placeholder="请选择统计维度">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="searchObj.depart_id" placeholder="请选择组合名称">
        <el-option
          v-for="item in groupList"
          :key="item.value"
          :label="item.depart_name"
          :value="item.depart_id"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="searchObj.month"
        type="month"
        placeholder="选择月份"
        value-format="yyyy-MM"
      ></el-date-picker>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="comprehen-content">
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="grid-content bg-purple grid-data">
            <div class="data-title">当月保险到期客户数</div>
            <div id="container1" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-light grid-data">
            <div class="data-title">成功续保客户数</div>
            <div id="container2" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-light grid-data">
            <div class="data-title">当月续保客户占比</div>
            <div id="container3" v-if="pie" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="7">
          <div class="grid-content bg-purple grid-data">
            <div class="data-title">流失客户数</div>
            <div id="container4" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-light grid-data">
            <div class="data-title">流失客户占比</div>
            <div id="container5" v-if="pie2" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-light grid-data">
            <div class="data-title">转保客户数</div>
            <div id="container6" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>

        <el-col :span="5">
          <div class="grid-content bg-purple-light grid-data">
            <div class="data-title">转保客户占比</div>
            <div id="container7" v-if="pie3" style="width: 100%;height:400px;"></div>
          </div>
        </el-col>
      </el-row>
      <hr />
      <p class="attention">注: 以上数据统计结果是在您使用车家佳保险系统基础上计算得出</p>
    </div>
  </div>
</template>

<script>
import Highcharts from "highcharts";
import exporting from "highcharts/modules/exporting";
// import HighchartsNoData from "highcharts/modules/no-data-to-display";
// HighchartsNoData(Highcharts);
exporting(Highcharts);
export default {
  data() {
    return {
      options: [],
      groupList: [],
      searchObj: {
        depart_id: "",
        level: "",
        month: ""
      },
      value: "",
      value1: "",
      pie: false,
      pie2: false,
      pie3: false
    };
  },
  async mounted() {
    var myDate = new Date();
    var tYear = myDate.getFullYear();
    var tMonth = myDate.getMonth();

    var m = tMonth + 1;
    if (m.toString().length == 1) {
      m = "0" + m;
    }
    this.searchObj.month = tYear + "-" + m;
    await this.getLevel();
    // this.getGroup();
    await this.getCharts();
  },
  watch: {
    "searchObj.level"() {
      this.searchObj.depart_id = "";
      this.getGroup();
    }
  },
  methods: {
    // 搜索
    search() {
      this.getCharts();
    },
    // 获取图标数据
    getCharts() {
      return this.$http
        .post(
          "/admin/statistics/index.php?act=insuranceAdminStatistics&op=insuranceStatistics",
          this.searchObj
        )
        .then(res => {
          let one = res.data.one;
          let two = res.data.two;
          let three = res.data.three;
          let four = res.data.four;
          let that = this;
          // one
          var chart1 = Highcharts.chart("container1", {
            chart: {
              type: "column"
            },
            title: false,
            credits: {
              //去掉水印
              enabled: false
            },
            exporting: {
              enabled: false
            },
            xAxis: {
              type: "category"
            },
            yAxis: {
              // visible: false
              title: {
                text: ""
              }
            },
            legend: {
              enabled: false
            },
            colors: ["#d4d4d4", "#32a8ee", "#1f62b1", "#7979dc", "#f29469"],
            plotOptions: {
              column: {
                borderWidth: 0,
                showInLegend: true
              }
            },
            series: [
              {
                name: "数量",
                colorByPoint: true,
                data: that.formatData(one.label, one.value)
              }
            ]
          });

          // two
          if(!two) two = {
            label: [],
            value: [],
            percent: []
          };
          var chart2 = Highcharts.chart("container2", {
            chart: {
              type: "column"
            },
            title: false,
            credits: {
              //去掉水印
              enabled: false
            },
            exporting: {
              enabled: false
            },
            legend: {
              enabled: false
            },
            xAxis: {
              type: "category"
            },
            yAxis: {
              title: {
                text: ""
              }
            },
            colors: ["#d4d4d4", "#32a8ee", "#f29469"],
            plotOptions: {
              column: {
                borderWidth: 0,
                showInLegend: true
              }
            },
            series: [
              {
                name: "数量",
                colorByPoint: true,
                data: that.formatData(two.label, two.value)
              }
            ]
          });

          // 判断饼图是否显示
          let pie = 0;
          two.percent.map(val => {
            if (val && parseFloat(val)) {
              pie++;
            }
          });
          if (pie >= 1 && pie <= two.percent.length) {
            this.pie = true;
            var chart3 = Highcharts.chart("container3", {
              chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: "pie"
              },
              title: {
                text: ""
              },
              tooltip: {
                pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
              },
              credits: {
                //去掉水印
                enabled: false
              },
              exporting: {
                enabled: false
              },
              colors: ["#d4d4d4", "#32a8ee", "#f29469"],
              plotOptions: {
                pie: {
                  allowPointSelect: true,
                  cursor: "pointer",
                  dataLabels: {
                    enabled: true,
                    format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                    style: {
                      color:
                        (Highcharts.theme &&
                          Highcharts.theme.contrastTextColor) ||
                        "black"
                    }
                  },
                  showInLegend: true
                }
              },
              series: [
                {
                  type: "pie",
                  name: "数量",
                  colorByPoint: true,
                  data: that.formatData(two.label, two.percent)
                }
              ]
            });
          } else {
            this.pie = false;
          }

          // three
          if(!three) three = {
            label: [],
            value: [],
            percent: []
          };
          var chart4 = Highcharts.chart("container4", {
            chart: {
              type: "column"
            },
            title: false,
            credits: {
              //去掉水印
              enabled: false
            },
            exporting: {
              enabled: false
            },
            legend: {
              enabled: false
            },
            xAxis: {
              type: "category"
            },
            yAxis: {
              title: {
                text: ""
              }
            },
            colors: ["#d4d4d4", "#32a8ee", "#f29469"],
            plotOptions: {
              column: {
                borderWidth: 0,
                showInLegend: true
              }
            },
            series: [
              {
                name: "数量",
                colorByPoint: true,
                data: that.formatData(three.label, three.value)
              }
            ]
          });

          // 判断饼图是否显示
          let pie2 = 0;
          three.percent.map(val => {
            if (val && parseFloat(val)) {
              pie2++;
            }
          });
          if (pie2 >= 1 && pie2 <= two.percent.length) {
            this.pie2 = true;
            var chart5 = Highcharts.chart("container5", {
              chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: "pie"
              },
              title: {
                text: ""
              },
              tooltip: {
                pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
              },
              credits: {
                //去掉水印
                enabled: false
              },
              exporting: {
                enabled: false
              },
              colors: ["#d4d4d4", "#32a8ee", "#f29469"],
              plotOptions: {
                pie: {
                  allowPointSelect: true,
                  cursor: "pointer",
                  dataLabels: {
                    enabled: true,
                    format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                    style: {
                      color:
                        (Highcharts.theme &&
                          Highcharts.theme.contrastTextColor) ||
                        "black"
                    }
                  },
                  showInLegend: true
                }
              },
              series: [
                {
                  name: "数量",
                  colorByPoint: true,
                  data: that.formatData(three.label, three.percent, "pie2")
                }
              ]
            });
          } else {
            this.pie2 = false;
          }

          // four
          if(!four) four = {
            label: [],
            value: [],
            percent: []
          };
          var chart6 = Highcharts.chart("container6", {
            chart: {
              type: "column"
            },
            title: false,
            credits: {
              //去掉水印
              enabled: false
            },
            exporting: {
              enabled: false
            },
            legend: {
              enabled: false
            },
            xAxis: {
              type: "category"
            },
            yAxis: {
              title: {
                text: ""
              }
            },
            colors: ["#d4d4d4", "#32a8ee"],
            plotOptions: {
              column: {
                borderWidth: 0,
                showInLegend: true
              }
            },
            series: [
              {
                name: "数量",
                colorByPoint: true,
                data: that.formatData(four.label, four.value)
              }
            ]
          });
          // 判断饼图是否显示
          let pie3 = 0;
          four.percent.map(val => {
            if (val && parseFloat(val)) {
              pie3++;
            }
          });
          if (pie3 >= 1 && pie3 <= two.percent.length) {
            this.pie3 = true;
            var chart7 = Highcharts.chart("container7", {
              chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: "pie"
              },
              title: {
                text: ""
              },
              tooltip: {
                pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
              },
              credits: {
                //去掉水印
                enabled: false
              },
              exporting: {
                enabled: false
              },
              plotOptions: {
                pie: {
                  allowPointSelect: true,
                  cursor: "pointer",
                  dataLabels: {
                    enabled: true,
                    format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                    style: {
                      color:
                        (Highcharts.theme &&
                          Highcharts.theme.contrastTextColor) ||
                        "black"
                    }
                  },
                  showInLegend: true
                }
              },
              colors: ["#d4d4d4", "#32a8ee"],
              series: [
                {
                  name: "数量",
                  colorByPoint: true,
                  data: that.formatData(four.label, four.percent)
                }
              ]
            });
          } else {
            this.pie3 = false;
          }
        });
    },

    formatData(first, second) {
      let data = [];
      if(!first) return data;
      first.map((value, i) => {
        let arr = [];
        second.map((val, j) => {
          if (i == j) {
            arr[0] = value;
            if (val) {
              arr[1] = parseFloat(val);
            } else {
              arr[1] = 0;
            }
          }
        });
        data.push(arr);
      });
      return data;
    },
    // 获取维度
    getLevel() {
      return this.$http
        .post("/admin/depart/index.php?act=departManage&op=departLevels")
        .then(res => {
          this.options = res.data;
          this.searchObj.level = this.options[0].value;
        });
    },
    // 获取组合
    getGroup() {
      return this.$http
        .post("/admin/depart/index.php?act=departManage&op=departListDown", {
          depart_level: this.searchObj.level
        })
        .then(res => {
          if (res.code == 1) {
            this.groupList = res.data;
          } else {
            this.groupList = [];
          }
        });
    },
    // 重置
    reset() {
      this.searchObj.level = this.options[0].value;
      this.searchObj.depart_id = "";
      this.searchObj.month = "";
      this.getCharts();
    }
  }
};
</script>

<style scoped lang="scss">
.customers-comprehen {
  min-height: 100%;
  background-color: rgb(243, 243, 243);
  .comprehen-content {
    padding: 0 10px 10px;
  }
 .el-main {
   
   background-color: rgb(243, 243, 243);
}
  .lead-deal {
    height: 440px;
    background-color: #fff;
    margin-bottom: 20px;
    .lead-deal-top {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: normal;
      text-indent: 20px;
      border-bottom: 1px solid rgb(233, 233, 233);
    }
    .lead-deal-content {
      display: flex;
      align-items: center;
      .lead-deal-right {
        margin-left: auto;
        margin-right: 20px;
        width: 424px;
        height: 360px;
        border: 1px solid rgb(233, 233, 233);
        .lead-deal-right-title {
          position: relative;
          color: #4c4949;
          height: 60px;
          line-height: 60px;
          text-indent: 70px;
          font-size: 18px;
          border-bottom: 1px solid rgb(233, 233, 233);
        }
        .lead-deal-right-title::before {
          position: absolute;
          content: "";
          width: 24px;
          height: 24px;
          background: url("../../../../assets/images/downd.png") no-repeat;
          top: 50%;
          left: 35px;
          transform: translateY(-50%);
        }
        .lead-deal-right-content {
          padding: 10px 50px 20px;
          .deal-right {
            display: flex;
            justify-content: space-between;
            color: rgb(181, 190, 200);
            margin-bottom: 10px;
            font-size: 12px;
            .deal-right-left {
              display: flex;
              align-items: center;
              span {
                margin-right: 30px;
                width: 18px;
                height: 18px;
                line-height: 18px;
                text-align: center;
              }
            }
            &:nth-of-type(-n + 3) span {
              background-color: rgb(124, 181, 236);
              border-radius: 50%;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  .data-title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: normal;
    text-indent: 20px;
    border-bottom: 1px solid rgb(233, 233, 233);
  }

  .grid-data {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .attention {
    text-align: center;
    color: #7b7979;
  }
}
</style>
